on/off 기능이 있고 레이어를 마우스로 드래그 할 수 있는 공지…
본문
<html>
<head>
<title>on/off 기능이 있고 레이어를 마우스로 드래그 할 수 있는 예제</title>
<script>
var nscp = (navigator.appName == "Netscape")
var ismc = (navigator.appVersion.indexOf("Mac") != -1)
var vers = parseFloat(navigator.appVersion.substring(22,25))
function getObj(obj) {
if (nscp) {
compLayr = document.layers[obj]
}else{
compLayr = eval("document.all." + obj + ".style")
}
return compLayr
}
function showHide(name){
obj = getObj(name) ;
if (obj.visibility=="hidden"){
obj.visibility = "visible" ;
} else {
obj.visibility = "hidden" ;
}
}
</script>
<script language="JavaScript1.2">
<!---
// 브라우져 체크....
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
//-->
</script>
</head>
<body>
<div id="showimage" style="position:absolute; left:245px; top:148px; width:456px; height:311px; z-index:1; visibility: hidden">
<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="dragbar" style="cursor:hand" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0" id="layer1" left="50" top="50" height="200" z-index="1">
<p><font face="Verdana" color="#FFFFFF"><strong><small>공지사항</small></strong></font>
</layer>
<p></ilayer>
</td>
<td style="cursor:hand;font-size:9pt;">
<a href="#" onClick="hidebox();return false"><font color=#ffffff>close</font></a></td>
</tr><tr>
<td width="100%" height="83" bgcolor="#FFFFFF" style="padding:0px" colspan="2">
내용을 넣어 주세요
</td></tr></table>
</td></tr></table>
</div>
<form>
<input type="button" value="Show/Hide layer"
onClick="showHide('showimage')">
</form>
</body>
</html>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=45
<head>
<title>on/off 기능이 있고 레이어를 마우스로 드래그 할 수 있는 예제</title>
<script>
var nscp = (navigator.appName == "Netscape")
var ismc = (navigator.appVersion.indexOf("Mac") != -1)
var vers = parseFloat(navigator.appVersion.substring(22,25))
function getObj(obj) {
if (nscp) {
compLayr = document.layers[obj]
}else{
compLayr = eval("document.all." + obj + ".style")
}
return compLayr
}
function showHide(name){
obj = getObj(name) ;
if (obj.visibility=="hidden"){
obj.visibility = "visible" ;
} else {
obj.visibility = "hidden" ;
}
}
</script>
<script language="JavaScript1.2">
<!---
// 브라우져 체크....
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
//-->
</script>
</head>
<body>
<div id="showimage" style="position:absolute; left:245px; top:148px; width:456px; height:311px; z-index:1; visibility: hidden">
<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="dragbar" style="cursor:hand" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0" id="layer1" left="50" top="50" height="200" z-index="1">
<p><font face="Verdana" color="#FFFFFF"><strong><small>공지사항</small></strong></font>
</layer>
<p></ilayer>
</td>
<td style="cursor:hand;font-size:9pt;">
<a href="#" onClick="hidebox();return false"><font color=#ffffff>close</font></a></td>
</tr><tr>
<td width="100%" height="83" bgcolor="#FFFFFF" style="padding:0px" colspan="2">
내용을 넣어 주세요
</td></tr></table>
</td></tr></table>
</div>
<form>
<input type="button" value="Show/Hide layer"
onClick="showHide('showimage')">
</form>
</body>
</html>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=45
관련링크
댓글목록
등록된 댓글이 없습니다.